<template>
  <div class="container py-5">
    <h2>管理端 - 创建聊天室</h2>

    <!-- 自动解散时间下拉框 -->
    <div class="mb-3">
      <label class="form-label">自动解散时间</label>
      <select v-model.number="expireMinutes" class="form-select">
        <option v-for="m in expireOptions" :key="m" :value="m">
          {{ formatMinutes(m) }}
        </option>
      </select>
    </div>

    <button class="btn btn-primary" @click="createRoom">创建房间</button>

    <div v-if="room" class="mt-3 alert alert-success">
      房间已创建！链接:
      <a :href="`/chat/${room.roomId}`" target="_blank">{{ room.roomId }}</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import axios from "axios";

const expireMinutes = ref(30);
const room = ref<any>(null);

// 生成下拉框选项：10min, 20min ... 480min (8小时)
const expireOptions = computed(() => {
  const options = [];
  options.push(10);
  options.push(30);
  options.push(60);
  options.push(120);
  options.push(240);
  options.push(480);
  return options;
});

// 格式化显示
function formatMinutes(minutes: number) {
  if (minutes < 60) return `${minutes} 分钟`;
  const hours = Math.floor(minutes / 60);
  const mins = minutes % 60;
  return mins === 0 ? `${hours} 小时` : `${hours} 小时 ${mins} 分钟`;
}

// 创建房间
async function createRoom() {
  try {
    const res = await axios.post(`/api/rooms/create`, {
      expireMinutes: expireMinutes.value
    });
    room.value = res.data;
  } catch (err) {
    console.error(err);
    alert("创建房间失败");
  }
}
</script>
